<template>
    <div>

        <h1>房号信息显示</h1>
        <a href="/add">房号新增</a>
        <br>
        <a href="https://localhost:7083/api/HouseNum/houseNumClasses">导出房型信息</a> 
        <br>
        房型:
        <select v-model="page.typeid">
            <option  value="0">请选择房型</option>
            <option v-for="e in typexlk"  :value="e.id">{{ e.typeName }}</option>
        </select>
         状态:
        <select v-model="page.stateid">
            <option value="0">请选择状态</option>
             <option v-for="e in statexlk"  :value="e.id">{{ e.stateName }}</option>
        </select>
        <input type="button" value="查询" @click="chax">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="quanxuan" @change="qx">
                    </td>
                    <td>编号</td>
                    <td>房号</td>
                    <td>状态</td>
                    <td>联系人手机号</td>
                    <td>联系人名</td>
                    <td>房型</td>
                    <td>联系人头像</td>
                    <td>更新</td>
                </tr>
            </thead>
            <tbody>
                 <tr v-for="e in data">
                    <td>
                        <input type="checkbox" v-model="quanx" :value="e.id">
                    </td>
                    <td>{{ e.id }}</td>
                    <td>{{ e.houseNum }}</td>
                    <td>
                        <span v-if="e.stateName=='空闲'" style="color:green ;" >
                            {{ e.stateName }}
                        </span>
                        <span v-else-if="e.stateName=='已入住'" style="color:blue ;" >
                            {{ e.stateName }}
                        </span>
                        <span v-else="e.stateName=='维修'" style="color:red ;" >
                            {{ e.stateName }}
                        </span>
                    </td>
                    <td>{{ e.userPhone.substring(0,2)+"**"+e.userPhone.substring(4,7)+"**"+e.userPhone.substring(9,11) }}</td>
                    <td>{{ e.userName }}</td>
                    <td>{{ e.typeName }}</td>
                    <td><img :src="'https://localhost:7083/'+e.userImg" style="height: 60px; width: 60px;"></td>
                     <td><input type="button" value="更新" @click="update(e.id)"></td>
                </tr>
            </tbody>
        </table>
        一共{{ pageinfo.count}}页,一页{{pageinfo.listcount}}条,当前第{{page.pageIndex}}页,每页显示{{page.pageSize}}条
   <input type="button" value="首页" @click="dianjieye(1)">
   <input type="button" value="上一页" @click="dianjieye(2)">
   <input type="button" v-for="e in pageinfo.listcount" :value="e" @click="djy(e)">
   <input type="button" value="下一页" @click="dianjieye(3)">
   <input type="button" value="尾页" @click="dianjieye(4)">
   <input type="number" v-model="page.pageIndex"><input type="button" value="跳转" @click="tz">
   <select v-model="page.pageSize" @change="yrl">
    <option :value="3">3</option>
    <option :value="5">5</option>
    <option :value="8">8</option>
   </select>
   <input type="button" value="逻辑删除" @click="loudelete">
   </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue'
import axios from 'axios' 
import { useRouter } from 'vue-router';

const router=useRouter();

onMounted(()=>{
    TypeXLKS();
    StateXLKS();
    show();
})
//全选反选
const quanxuan=ref(false);
const quanx = ref([]);

const qx=()=>{
    if(quanxuan.value){
         quanx.value=[];
         data.value.forEach(e=>{
            quanx.value.push(e.id);
         })
    }
    else{
         quanx.value=[];
    }

}
//逻辑删除
const loudelete=()=>{
    if(!confirm("确认删除吗"))
{
    return;
}
     axios.get("https://localhost:7083/api/HouseNum/luoDelete",{params:{idstring:quanx.value.toString()}}).then(res=>{
         if(res.data>0)
         {
            alert("逻辑删除成功");
            quanx.value=[];
            show();
         }
         else{
            alert("逻辑删除失败");
            return;
         }
     })
}

//查询
const chax=()=>{
    show();
}


//类型下拉框
const typexlk = ref([{
    "id": 1,
    "typeName": "标准间"
}])
const TypeXLKS=()=>{
 axios.get("https://localhost:7083/api/HouseType").then(res=>[
    typexlk.value=res.data
 ])
}

const statexlk = ref([{
     "id": 1,
    "stateName": "空闲"
}])
const StateXLKS=()=>{
 axios.get("https://localhost:7083/api/StateHouse").then(res=>[
    statexlk.value=res.data
 ])
}

//也容量
const yrl=()=>{
    show();
}

//跳转页
const tz=()=>{
    show();
} 
const djy=(val:any)=>{
    page.value.pageIndex=val;
    show();
}

//点击页
const dianjieye=(val:any)=>{
    if(val==1)
{
  page.value.pageIndex=1
}
 if(val==2)
{
 if(page.value.pageIndex>1)
 {
 page.value.pageIndex-=1
 }
}
 if(val==3)
{
   if(page.value.pageIndex<pageinfo.value.listcount)
 {
 page.value.pageIndex+=1
 }
}
 if(val==4)
{
  page.value.pageIndex=pageinfo.value.listcount
}
show();

}


const data =ref([{
      "id": 1,
      "houseNum": "",
      "stateHouse": 1,
      "isDelete": true,
      "houseDate": null,
      "userPhone": "12345678999",
      "userName": "admin1",
      "typeid": 1,
      "userImg": "string",
      "typeName": "标准间",
      "stateName": "空闲"
    }])

const page=ref({
    pageIndex:1,
    pageSize:3,
    typeid:0,
    stateid:0, 
})
const pageinfo=ref({
    count:0,
    listcount:0,
})
const show=()=>{
    axios.get("https://localhost:7083/api/HouseNum/ShowHouseNum",{params:page.value}).then(res=>{
        data.value=res.data.listcount
        
        pageinfo.value.count=res.data.count
        pageinfo.value.listcount=Math.ceil(pageinfo.value.count/page.value.pageSize)
    })
}

//更新跳转页
const update=(val:any)=>{
    router.push({path:"/up",query:{id:val}})
}

</script>

<style scoped>

</style>